.userInfoContent {
  :global {
    .topTitle {
      padding: 15px 20px;
      border-bottom: 1px solid #eceef1;
    }
    .bottomInfo {
      padding: 10px 20px;
      display: flex;
      .leftInfo {
        flex: 2;
        flex-shrink: 0;
        .baseInfo {
          margin: 10px 0;
          .tabTitle {
            font-size: 14px;
            margin-bottom: 20px;
          }
        }
        .submitBtn {
          padding: 5px 15px;
          background-color: var(--primary-color);
          color: #fff;
          border-radius: 4px;
          width: max-content;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .rightHeaderImg {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 20px;
        flex: 1;
        flex-shrink: 0;
        .header {
          position: relative;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow: hidden;
          border: 1px solid #eceef1;
          img {
            width: 100%;
            height: 100%;
          }
          .overlay {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 10px;
            left: 0;
            top: 0;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
            .topIcon {
              margin-bottom: 4px;
              font-size: 14px;
            }
          }
        }
        .header:hover .overlay {
          opacity: 1;
        }
        .tips {
          font-size: 12px;
          margin: 10px 0;
        }
        .tipsLitter {
          font-size: 10px;
          color: #8a919f;
        }
      }
      .rightLike {
        .likeTabContent {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          .tabs {
            display: flex;
            align-items: center;
            background-color: #f2f3f5;
            padding: 4px 10px;
            width: max-content;
            border-radius: 4px;
            margin: 0 10px 10px 0;
            .close {
              font-size: 12px;
              cursor: pointer;
              margin-left: 4px;
            }
          }
        }
        .allLikeSelect {
          border: 1px solid #eceef1;
          border-radius: 5px;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          .likes {
            background-color: #f2f3f5;
            width: max-content;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
          }
          .likes:hover {
            background-color: #eaf2ff;
          }
          .likesActive {
            background-color: #eaf2ff;
            color: var(--primary-color);
          }
        }
      }
    }
  }
}
